<template>
  <!-- 市场数据 -->
  <div class="market_data">
    <div class="int_title">
      <h4 class="int_text">市场数据</h4>
      <div class="int_nav">
        <span @click="$router.push('/chart')">查看更多</span>
        <i class="iconfont iconicon_more"></i>
      </div>
    </div>
    <div class="content">
      <div class="city">
        <span class="city_det">{{ marketList.city }}</span>
        <span class="city_det">{{ marketList.position }}</span>
      </div>
      <div class="salary">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span class="count">{{ item.year }}</span>
          <div class="all">
            <div class="percentage">
              <div class="per_count">￥10970</div>
            </div>
          </div>
          <div v-if="item.percent" class="baifenbi">
            <i
              class="iconfont iconicon_shangsheng icon"
              v-if="item.percent > 0"
            ></i>
            <i
              class="iconfont iconicon_xiajiang icon"
              v-else
              style="color: red"
            ></i>
            <span class="sal_count">{{ item.percent }}%</span>
          </div>
          <div v-else style="width: 18%"></div>
        </div>
      </div>
      <div class="more_data">
        <div @click="showData" v-if="show">
          展开更多
          <i class="iconfont iconicon_zhankai type"></i>
        </div>
        <div @click="hideData" v-else>
          收起显示
          <span class="rotate">
            <i class="iconfont iconicon_zhankai type"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { topChartData } from '@/api/api.js'
export default {
  data () {
    return {
      marketList: '',
      show: true,
      list: []
    }
  },
  created () {
    this.getMarketData()
    // this.hideData()
  },
  methods: {
    // 展开
    showData () {
      this.list = this.marketList.yearSalary
      this.show = false
    },
    // 收起
    hideData () {
      if (this.marketList) {
        this.list = this.marketList.yearSalary.slice(0, 3)
        this.show = true
      }
    },
    // 获取市场数据列表
    async getMarketData () {
      const res = await topChartData()
      console.log(res)
      this.marketList = res.data
      this.marketList.yearSalary.reverse()
      this.list = this.marketList.yearSalary.slice(0, 3)
    }
  }
}
</script>

<style lang="less" scoped>
.market_data {
  background-color: #fff;
  margin: 10px 0;
  .city {
    margin-bottom: 20px;
    .city_det {
      background: #eceaea;
      border-radius: 5px;
      margin-right: 10px;
      padding: 5px;
    }
  }
  .salary {
    overflow: hidden;
    .item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      .count {
        font-size: 14px;
        width: 24%;
      }
      .all {
        width: 56%;
        height: 12px;
        background: #ebdfdf;
        border-radius: 5px;
        margin: 0 10px;
        .percentage {
          position: relative;
          width: 80%;
          height: 100%;
          border-radius: 5px;
          background: #fe6d67;
          .per_count {
            position: absolute;
            font-size: 10px;
            color: #fff;
            right: 5px;
            bottom: 0;
          }
        }
      }
      .icon {
        color: #60d183;
        margin: 0 5px;
        float: left;
      }
      .sal_count {
        float: right;
      }
      .baifenbi {
        width: 20%;
      }
    }
  }
  .more_data {
    font-size: 14px;
    text-align: center;
    color: #545671;
    padding-bottom: 20px;
    .type {
      font-size: 12px;
      color: #b4b4bc;
    }
  }
  .content {
    padding: 0 10px;
  }
  .rotate {
    display: inline-block;
    transform: rotate(180deg) !important;
  }
}
</style>
